<template>
    <div class="box_content">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="125px"  label-position="left">
          <!-- <el-col :span="8" label-position="left">
            <el-form-item label="缴费单号" prop="billId">
              <el-input v-model="formData.billId" placeholder="请输入缴费单号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="8" label-position="left">
            <el-form-item label="机构编号" prop="groupId">
              <el-input v-model="formData.groupId" placeholder="请输入机构编号" clearable :style="{width: '100%'}" >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" label-position="left">
            <el-form-item label="收费项目编号" prop="projectId">
              <el-input v-model="formData.projectId" placeholder="请输入收费项目编号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" label-position="left">
            <el-form-item label="收费项目名称" prop="projectNm">
              <el-input v-model="formData.projectNm" placeholder="请输入收费项目名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" label-position="left">
            <el-form-item label="户号" prop="loginInfo">
              <el-input v-model="formData.loginInfo" placeholder="请输入户号" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" label-position="left">
            <el-form-item label="地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入地址" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8" label-position="left">
            <el-form-item label="缴费大类" prop="billTypeId">
              <el-input v-model="formData.billTypeId" placeholder="请输入缴费大类" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" label-position="left">
            <el-form-item label="缴费大类名称" prop="billTypeNm">
              <el-input v-model="formData.billTypeNm" placeholder="请输入缴费大类名称" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8" label-position="left">
            <el-form-item label="缴费小类" prop="billItemId">
              <el-input v-model="formData.billItemId" placeholder="请输入缴费小类" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="8" label-position="left">
            <el-form-item label="缴费小类名称" prop="billItemNm">
              <el-input v-model="formData.billItemNm" placeholder="请输入缴费小类名称" clearable :disabled="true"
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" label-position="left">
            <el-form-item label="应缴金额" prop="duepayAmt">
              <el-input v-model="formData.duepayAmt" placeholder="请输入应缴金额" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" label-position="left">
            <el-form-item label="实缴金额" prop="payAmt">
              <el-input v-model="formData.payAmt" placeholder="请输入实缴金额" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" label-position="left">
            <el-form-item label="优惠金额" prop="freeAmt">
              <el-input v-model="formData.freeAmt" placeholder="请输入优惠金额" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8" label-position="left">
            <el-form-item label="缴费状态" prop="status">
              <el-select v-model="formData.status" placeholder="请选择缴费状态" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label"
                  :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="8" label-position="left">
            <el-form-item label="短信通知手机号码" prop="mobile">
              <el-input v-model="formData.mobile" placeholder="请输入短信通知手机号码" :maxlength="11" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注"
                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          
        </el-form>
      </el-row>
      <div class="button_box">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
      </div>
    </div>
  </template>
  <script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        formData: {
          billId: '',
          groupId: '000001',
          address:'',
          projectId: '',
          projectNm: '',
          chooseProject:'00',
          loginInfo: '',
          billTypeId: '',
          billTypeNm: '',
          billItemId: '01001',
          billItemNm: '电费',
          duepayAmt: '',
          payAmt: '',
          freeAmt: '',
          status: '00',
          mobile: '',
          remark: undefined,
        },
        rules: {
          billId: [{
            required: true,
            message: '请输入缴费单号',
            trigger: 'blur'
          }],
          groupId: [{
            required: true,
            message: '请输入机构编号',
            trigger: 'blur'
          }],
          projectId: [{
            required: true,
            message: '请输入收费项目编号',
            trigger: 'blur'
          }],
          projectNm: [{
            required: true,
            message: '请输入收费项目名称',
            trigger: 'blur'
          }],
          loginInfo: [{
            required: true,
            message: '请输入缴费单查询条件',
            trigger: 'blur'
          }],
          billTypeId: [{
            required: true,
            message: '请输入缴费大类',
            trigger: 'blur'
          }],
          billTypeNm: [{
            required: true,
            message: '请输入缴费大类名称',
            trigger: 'blur'
          }],
          billItemId: [{
            required: true,
            message: '请输入缴费小类',
            trigger: 'blur'
          }],
          billItemNm: [{
            required: true,
            message: '请输入缴费小类名称',
            trigger: 'blur'
          }],
          duepayAmt: [{
            required: true,
            message: '请输入应缴金额',
            trigger: 'blur'
          }],
          payAmt: [{
            required: true,
            message: '请输入实缴金额',
            trigger: 'blur'
          }],
          freeAmt: [{
            required: true,
            message: '请输入优惠金额',
            trigger: 'blur'
          }],
          status: [{
            required: true,
            message: '请选择缴费状态',
            trigger: 'change'
          }],
          address: [{
            required: true,
            message: '请输入地址信息',
            trigger: 'blur'
          }],
          mobile: [],
          remark: [],
        },
        projectOptions:[{
            "label": "广州南方电网",
            "value": "00"
        },{
            "label": "深圳南方电网",
            "value": "01"
        }],
        statusOptions: [{
          "label": "未缴费",
          "value": "00"
        }, {
          "label": "已缴费",
          "value": "01"
        }, {
          "label": "部分缴费",
          "value": "02"
        }, {
          "label": "已退款",
          "value": "03"
        }, {
          "label": "部分退款",
          "value": "04"
        }],
      }
    },
    computed: {

    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }
  
  </script>
    <style scoped  lang="scss">
    .box_content{
    padding-top: 5vh;
    padding-bottom: 5vh;
    padding-left: 5vw;
    padding-right: 5vw;
        .button_box{
            margin: auto;
            margin-top: 30px;
            text-align: center;
        }
    }
    </style>
  